<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org" xmlns:inputrh="http://www.w3.org/1999/html">
<title>爱读书</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<script lang="javascript" type="text/javascript" th:src="@{https://libs.baidu.com/jquery/1.11.3/jquery.min.js}"></script>
<link rel="stylesheet" th:href="@{/css/core.min-20160809.css}">
<link rel="stylesheet" th:href="@{/css/dushu.min-20160802.css}">
<link rel="stylesheet" th:href="@{/css/font_1468833227_139596.css}">
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.7/css/layui.css"/>
<script src="https://www.layuicdn.com/layui-v2.5.7/layui.js"></script>
<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }

    body {
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    #qq {
        width: 800px;
        /*宽*/
        height: 170px;
        /*高*/
        background: #fff;
        /*背景颜色*/
        margin: 50px  30px;
        border-radius: 5px;
        /*Html5 圆角*/
    }

    #qq p {
        font-size: 12px;
        color: #666;
        font-family: "微软雅黑";
        line-height: 45px;
        text-indent: 20px;
    }

    /*        #qq .message {
                width: 800px;
                height: 100px;
                margin: 0 auto;
                overflow: hidden;
                outline: none;
                border: 1px solid #ddd;
                padding: 8px;
                box-sizing: border-box;
                font-size: 12px;
                -webkit-background-clip: text;
                background-image: linear-gradient(to right, #778899 0%, #333 100%);
                !*粗细 风格 颜色*!
            }*/

    #qq .But {
        width: 800px;
        height: 35px;
        margin: 15px auto 0px;
        position: relative;
        /*相对，参考对象*/
    }

    #qq .But img.bq {
        float: left;
        /*左浮动*/
    }

    #qq .But span.submit {
        width: 80px;
        height: 30px;
        background: #ff8140;
        display: block;
        float: right;
        /*右浮动*/
        line-height: 30px;
        border-radius: 5px;
        cursor: pointer;
        /*手指*/
        color: #fff;
        font-size: 12px;
        text-align: center;
        font-family: "微软雅黑";
    }

    /*face begin*/
    #qq .But .face {
        width: 440px;
        background: #fff;
        border: 1px solid #ddd;
        box-shadow: 0 0 12px #666;
        position: absolute;
        /*绝对定位*/
        top: 21px;
        left: 15px;
        display: none;
        /*隐藏*/
    }

    #qq .But .face ul {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 8px;
        box-sizing: border-box;
    }

    #qq .But .face ul li {
        width: 30px;
        height: 30px;
        list-style-type: none;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*msgCon begin*/
    .msgCon {
        width: 800px;
        margin-left: 38px;
    }

    .msgCon .msgBox {
        background: #fff;
        padding: 10px;
        box-sizing: border-box;
        margin-top: 16px;
        border-radius: 4px;
    }

    .msgCon .msgBox .headUrl {
        width: 100%;
        height: 60px;
        border-bottom: 1px dotted #ddd;
        display: flex;
        align-items: center;
    }

    .msgCon .msgBox .headUrl img {
        width: 46px;
        height: 46px;
        border-radius: 50%
    }

    .msgCon .msgBox .headUrl div {
        flex: 1;
        display: flex;
        flex-flow: column;
        font-size: 16px;
        margin-left: 16px;
        -webkit-background-clip: text;
        color: transparent;
        background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%);
    }

    .msgCon .msgBox .headUrl div .time {
        font-size: 14px;
        margin-top: 6px;
        -webkit-background-clip: text;
        color: transparent;
        background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
    }

    .msgCon .msgBox .headUrl a {
        font-size: 14px;
        padding: 10px;
        color: salmon;
        cursor: pointer;
    }

    .msgCon .msgBox .msgTxt {
        font-size: 14px;
        color: #666;
        min-height: 40px;
        line-height: 24px;
        padding: 10px;
        box-sizing: border-box;
        word-wrap: break-word;
        -webkit-background-clip: text;
        color: transparent;
        background-image: linear-gradient(to right, #778899 0%, #333 100%);
    }
</style>
<!--获取当前图书的第一个章节-->
<script th:inline="javascript">
    let chapters =[[${chapterBooks.chapters}]][0]
</script>
</head>
<body>

<!--隐藏域变量-->
<div>
    <input th:if="${user ne null}" id="userId" type="hidden" th:value="${user.id}">
    <input th:if="${chapterBooks ne null}" id="chapterId" type="hidden" th:value="${chapterBooks.id}">
    <!--隐藏域变量-->
    <input type="hidden" id="pointValue" th:value="${pointValue}">
    <input type="hidden" id="bookId" th:value="${bookId}">
</div>

<!--实现登录注册-->
<div class="layout bg border-bottom">
    <div class="container height-big text-gray">
        <span class="float-right">
            <a th:href="@{/index/toLogin}" th:text="${session.user}==null?'注册':'欢迎回来'" class="text-gray"></a>
            <span class="text-little">|</span>
            <a th:href="@{/index/toLogin}" class="text-gray" id="userPhoneId" th:text="${session.user}==null?'登陆':${session.user.phone}"></a>
        </span>读书好，好读书，读好书！
    </div>
</div>
<!--可下拉式导航栏-->
<div class="layout bg border-bottom fixed-top hidden" style="z-index: 99;" id="fixednav">
    <div class="container"><div class="row">
        <div class="span4">
            <a href="javascript:;" title="读书网">
                <img th:src="@{/picture/login1.png}" alt="爱读书"></a></div>
        <div class="span13">
            <ul class="nav nav-inline nav-menu padding-top">
                <li><a href="/index/toRead" >每日一读</a></li>
                <li><a th:href="@{/index/toNovel/1}" >小说作品</a></li>
                <li><a th:href="@{/index/toNovel/2}" >经济管理</a></li>
                <li><a th:href="@{/index/toNovel/3}">历史传记</a></li>
                <li><a th:href="@{/index/toNovel/4}">生活艺术</a></li>
                <li><a th:href="@{/index/toNovel/5}" >文学艺术</a></li>
                <li><a th:href="@{/index/toNovel/6}" >社会科学</a></li>
                <li><a th:href="@{/index/toNovel/7}" >成功励志</a></li>
            </ul>
        </div>

        <!--轮播图的搜索框-->
        <div class="span7 text-right">
            <form name="searchform" th:action="@{/index/toSearch}">
                <div class="input-group padding-small-top">
                    <input required="required" type="text" class="wd input border-main" name="name" value="" autocomplete="off" size="30" placeholder="搜索海量图书/电子书/网络小说">
                    <span class="addbtn"><button class="button bg-main"><span class="icon-search"></span></button></span>
                </div>
            </form>
        </div>
    </div>
    </div>
</div>

<!--首页  top-->
<div class="container">
    <div class="row">
        <div class="span8"><a href="javascript:;"  title="爱读书"><img th:src="@{/picture/login2.png}" alt="爱读书"></a></div>
        <!--搜索框，通过form表单实现 -->
        <div class="span10 padding-big-top">
            <form name="searchform" th:action="@{/index/toSearch}">
                <div class="input-group padding-little-top margin-big-right">
                    <input type="text" required="required" name="name" class="wd input input-big border-main" value="" size="30"
                           placeholder="搜索海量图书">
                    <span class="addbtn"><button class="button button-big bg-main" id="search_button"><span
                            class="icon-search text-large"></span></button></span>
                </div>
            </form>
        </div>

        <!--实现我的账户和书架-->
        <div class="span6 padding-large-top text-right">
            <div class="button-group" th:if="${session.user} ne null">
                <button type="button" class="button text-main"><span class="icon-user"></span> <a th:href="@{/index/toAccount/}+${session.user.phone}">我的账户</a></button>
                <button type="button" class="button text-main"><span class="icon-shujia"></span><a th:href="@{/index/toBookshelf/}+${session.user.id}">我的书架</a> </button>
            </div>
            <div class="button-group" th:if="${session.user} eq null">
                <button type="button" class="button text-main"><span class="icon-user"></span> <a href="javascript:;">我的账户</a></button>
                <button type="button" class="button text-main"><span class="icon-shujia"></span><a href="javascript:;">我的书架</a> </button>
            </div>
        </div>

    </div>
</div>

<!--图书分类导航-->
<div class="container">
    <div class="row margin-top">
        <div class="span24">
            <ul class="nav nav-menu nav-inline nav-sub nav-big nav-navicon nav-justified border-dot">
                <li id="ctl00_c1_nav_meiwen"><a  th:href="@{/index/toRead}">每日一读</a></li>
                <li id="ctl00_c1_nav_lianzai" class="active"><a  href="javascript:;" >在线读书</a></li>
                <li id="ctl00_c1_nav_daohang"><a href="#">读书导航</a></li>
            </ul>

            <ul class="nav nav-inline nav-menu margin-top nav-justified subnav">
                <li><a th:href="@{/index/toNovel/1}" >小说作品</a></li>
                <li><span class="sep">|</span></li>
                <li><a th:href="@{/index/toNovel/2}">经济管理</a></li>
                <li><span class="sep">|</span></li>
                <li><a th:href="@{/index/toNovel/5}">文学艺术</a></li>
                <li><span class="sep">|</span></li>
                <li><a th:href="@{/index/toNovel/3}">历史传记</a></li>
                <li><span class="sep">|</span></li>
                <li><a th:href="@{/index/toNovel/4}">生活时尚</a></li>
                <li><span class="sep">|</span></li>
                <li><a th:href="@{/index/toNovel/7}">成功励志</a></li>
                <li><span class="sep">|</span></li>
                <li><a th:href="@{/index/toNovel/6}">社会科学</a></li>
            </ul>
        </div>
    </div>
</div>

<!--显示图书信息-->
<div class="container margin-top">
    <div class="crumbs">
        当前位置： <a th:href="@{/}">首页</a>
        <span class="icon-crumb"></span>
        <a th:href="@{/}">在线阅读</a>
        <span class="icon-crumb"></span>
        <a  href="javascript:;" th:text="${chapterBooks.type}"></a>
        <span class="icon-crumb"></span>
        <a href="javascript:;" th:text="${chapterBooks.title}"></a>
    </div>
</div>

<div class="container margin-top">
    <div class="bookdetails-left">
        <div>
            <div class="book-title">
                <h1 th:text="${chapterBooks.title}"></h1>
            </div>
            <div class="book-pic">
                <div class="pic"><img th:src="'/index/toHtml?Url='+${chapterBooks.image}" th:alt="${chapterBooks.title}" th:title="${chapterBooks.title}"></div>
            </div>
            <div class="book-details">
                <div class="book-details-left" style="width:100%;float:none !important;">
                    <table>
                        <tbody>
                        <tr>
                            <td style="width:80px;">作　者：</td>
                            <td th:text="${chapterBooks.author}"></td>
                        </tr>
                        <tr>
                            <td style="width:80px;">出版社：</td>
                            <td><a href="javascript:;" th:title="${chapterBooks.press}" target="_blank" th:text="${chapterBooks.press}"></a></td>
                        </tr>
                        <tr>
                            <td style="width:80px;">丛编项：</td>
                            <td>无</td>
                        </tr>
                        <tr>
                            <td style="width:80px;">版权说明：</td>
                            <td>经版权方授权连载试读，不得转载</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <hr class="margin-large-top margin-large-bottom">
                <div class="thumbs">
                    <span onclick="changeThumbs(this)" class="thumbs-span"> <img th:src="@{/picture/thumbs-down.png}" style="width: 30px; height: 30px;"></span>
                    <span onclick="changeOrder(this)"  class="order-span" ><img th:src="@{/picture/order4.png}" alt="订阅"  title="订阅" style="width: 30px;height: 30px; margin-top: 1px;"></span>
                </div>
                <div style="float: right">
                    <span style="font-size: 28px;font-family: DIN-Medium; vertical-align: -2px; margin-right: 5px;" th:text="${allPoints}"></span>
                    <div id="book-stars"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-tab layui-inline" style="float: left !important; width: 870px;">
        <ul class="layui-tab-title">
            <li class="layui-this">图书基本信息</li>
            <li>书评</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="book-summary"><h4>内容简介</h4>
                    <div class="border margin-top padding-large">
                        <div class="text txtsummary" th:text="${chapterBooks.book_introduction}">

                        </div>
                    </div>
                </div>
                <div class="book-summary"><h4>作者简介</h4>
                    <div class="border margin-top padding-large">
                        <div class="text txtsummary" th:text="${chapterBooks.author_introduction}">　　</div>
                    </div>
                </div>
                <div class="book-summary">
                    <div class="text-big">目录</div>

                    <div class="border margin-top margin-large-bottom">
                        <div class="book-chapter">
                            <span class="icon-caidan margin-right text-main"></span>正文
                        </div>
                        <div style=" display: inline-block; width: 49%;margin-right: -5px;float: left;">
                            <table id="ctl00_c1_volumes_ctl00_chapters" class="booklist-table table-striped"
                                   cellspacing="0"
                                   border="0" style="border-collapse:collapse;">
                                <tr th:each="chapter,iterStat:${chapterBooks.chapters}"
                                    th:if="${iterStat.count % 2 == 1} ">
                                    <td><a th:href="@{/book/getChapter/}+${chapter.book_id}+'/'+${chapter.id}"
                                           th:text="${chapter.chapter_title}"></a></td>
                                </tr>
                            </table>
                        </div>
                        <div style="display: inline-block;width: 51%">
                            <table id="ctl00_c1_volumes_ctl00_chapters1" class="booklist-table table-striped"
                                   cellspacing="0"
                                   border="0" style="border-collapse:collapse;">
                                <tr th:each="chapter,iterStat:${chapterBooks.chapters}"
                                    th:if="${iterStat.count % 2 == 0} ">
                                    <td><a th:href="@{/book/getChapter/}+${chapter.book_id}+'/'+${chapter.id}"
                                           th:text="${chapter.chapter_title}"></a></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item" style="margin-left: -10px;">
                <div id="qq">
                    <span>有什么新鲜事想告诉大家?</span>
                    <div style="float: right">
                        <span style="margin-right: 20px;">为此书评分</span>
                        <div id="stars"></div>
                    </div>
                    <div class="message" >
                        <textarea style="width: 800px;height: 100px" id="textContent"></textarea>
                    </div>
                    <div class="But">
                        <span onclick="submitTextarea()" class='submit'>发表</span>
                    </div>
                </div>
                <!--评论模块-->
                <div id="commentList">
                    <div class="msgCon" th:id="'comment'+${comment.id}" th:if="${comments ne null}" th:each="comment,commentStat:${comments}">
                        <div class='msgBox'>
                            <div class='msgTxt'>
                                <div class='msgBox'>
                                    <div class="headUrl">
                                        <img src='/images/tx.jpg' width='50' height='50'/>
                                        <div>
                                            <span class="title" th:text="${comment.userPhone}"></span>
                                            <span class="time" th:text="${#strings.substring(comment.date,0,10)}"></span>
                                        </div>
                                        <a class="del" th:if="${userId ne null && comment.userId eq userId}">删除</a>
                                    </div>
                                    <div class='msgTxt' th:text="${comment.content}"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bookdetails-right" style="margin-top: -270px;">
        <div class="tit margin-big-top"><h3>读书推荐</h3></div>
        <div id="J_commend" class="books-left border">
            <!--排行榜-->
            <ul>
                <li th:each="book,iterStat:${rankBooks}">
                    <p style="display: none;" class="fold">
                        <a th:href="@{/index/toBookInfo/}+${book.id}" th:title="${book.title}" target="_blank" th:text="${book.title}"><i th:text="${iterStat.count}"></i></a></p>
                    <div class="unfold" style="display: block;">
                        <i th:text="${iterStat.count}"></i>
                        <div>
                            <div class="img80"><a th:href="@{/index/toBookInfo/}+${book.id}" th:title="${book.title}" target="_blank"><img th:alt="${book.title}" th:src="'/index/toHtml?Url='+${book.image}"></a></div>
                            <h3><a th:href="@{/index/toBookInfo/}+${book.id}" th:title="${book.title}" target="_blank" th:text="${book.title}"></a></h3>
                            <p></p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>


<div class="layout" id="footer">
    <div class="container padding">
        <div class="text-center">
            <ul class="nav nav-inline">
                <li><a href="1587.html">关于读书</a></li>
                <li><a href="1588.html">免责声明</a></li>
                <li><a href="1589.html">读书目录</a></li>
                <li><a href="1590.html">联系我们</a></li>
            </ul>
        </div>
        <div class="text-center height-big">Copyright © 读书网 www.dushu.com 2005-2020, All Rights Reserved.</div>
        <div class="text-center height-big"><a href="javascript:;">鄂ICP备15019699号</a> <img
                th:src="@{/picture/beian.png}" style="vertical-align:middle;margin-left:10px;"> 鄂公网安备 42010302001612号
        </div>
    </div>
</div>
<!--隐藏信息-->
<div>
</div>
<script>
    /*设置全局变量，计算用户点击次数*/
    let countNumber = 0;
    let orderNumber = 0;
    /* <img th:src="@{/picture/thumbs-up.png}" style="width: 30px; height: 30px;">*/
    /*判断是否要显示登陆注册*/
    $(function () {
        if ($('.float-right').find("a:eq(0)").text() == '欢迎回来') {
            $(".float-right").find("a:eq(0)").attr("href", "javascript:;");
            $(".float-right").find("a:eq(1)").attr("href", "javascript:;");
        }
    });
    /*判断用户是否订阅这本书*/
    $(function () {
        let userId = $("#userId").val();
        let bookId = $("#chapterId").val();
        if ("undefined" == typeof userId){
            return false;
        }

        /*判断用户是否订阅该图书*/
        $.post(
            "/like/see",
            {'userId':userId,'bookId':bookId},
            function (data) {
                if (data == true){
                    $(".order-span").empty();
                    $(".order-span").append("<img src=\"/picture/order3.png\" alt=\"已订阅\"  title=\"已订阅\" style=\"width: 30px;height: 30px; margin-top: 1px;\"><p style=\"display: inline-block;color: #61ABAA;padding-left: 5px;\">已订阅</p>");
                }else {
                    $(".order-span").empty();
                    $(".order-span").append("<img src=\"/picture/order4.png\" alt=\"未订阅\"  title=\"未订阅\" style=\"width: 30px;height: 30px; margin-top: 1px;\">");
                }
            });
        /*判断用户是否点赞*/
        $.post(
            "/like/show",
            {'userId':userId,'bookId':bookId},
            function (data) {
                if (data == true){
                    $(".thumbs-span").empty();
                    $(".thumbs-span").append("<img src=\"/picture/thumbs-up.png\" style=\"width: 30px; height: 30px;\"> <p style=\"display: inline-block;color: #61ABAA;\">已点赞</p>");
                }else {
                    $(".thumbs-span").empty();
                    $(".thumbs-span").append("<img src=\"/picture/thumbs-down.png\" style=\"width: 30px; height: 30px;\">");
                }
            });
    })

    /*处理点赞时间*/
    function changeThumbs(e) {
        countNumber+=1;
        let pContent = $(e).find("p:eq(0)").text();
        /*获取登陆之后的用户id*/
        let userId = $("#userId").val();
        let bookId = $("#chapterId").val();

        if("undefined" == typeof userId){
            alert("请先登录！！");
            return;
        }
        if (countNumber<5){
            if(pContent == ''){
                //temp状态值为1，同时该书的获赞数+1
                $.post(
                    "/like/changeStatus",
                    {'userId':userId,'bookId':bookId,'status':1},
                    function (data) {
                    }
                );
                $(e).empty();
                $(e).append("<img src=\"/picture/thumbs-up.png\" style=\"width: 30px; height: 30px;\"> <p style=\"display: inline-block;color: #61ABAA;\">已点赞</p>");
                return ;
            }else {
                //temp状态值为0，同时该书的获赞数-1
                $.post(
                    "/like/changeStatus",
                    {'userId':userId,'bookId':bookId,'status':0},
                    function (data) {
                    }
                );
                $(e).empty();
                $(e).append("<img src=\"/picture/thumbs-down.png\" style=\"width: 30px; height: 30px;\">");
                return;
            }
        }else {
            alert("客官慢点哈！！");
        }
    }

    /*判断是否订阅*/
    function changeOrder(e) {
        orderNumber+=1;
        let pContent = $(e).find("p:eq(0)").text();
        /*获取登陆之后的用户id*/
        let userId = $("#userId").val();
        let bookId = $("#chapterId").val();

        if("undefined" == typeof userId){
            alert("请先登录！！");
            return;
        }
        if (countNumber<5){
            if(pContent == ''){
                //temp状态值为1，同时该书的评论数+1
                $.post(
                    "/like/changeOrder",
                    {'userId':userId,'bookId':bookId,'chapter_title':chapters.chapter_title,'chapter_id':chapters.id,'status':1},
                    function (data) {
                    }
                );
                $(e).empty();
                $(e).append("<img src=\"/picture/order3.png\" alt=\"订阅\"  title=\"订阅\" style=\"width: 30px;height: 30px; margin-top: 1px;\"><p style=\"display: inline-block;color: #61ABAA;padding-left: 5px;\">已订阅</p>");
                return ;
            }else {
                //temp状态值为0，同时该书的获赞数-1
                $.post(
                    "/like/changeOrder",
                    {'userId':userId,'bookId':bookId,'chapter_title':chapters.chapter_title,'chapter_id':chapters.id,'status':0},
                    function (data) {
                    }
                );
                $(e).empty();
                $(e).append("<img src=\"/picture/order4.png\" alt=\"订阅\"  title=\"订阅\" style=\"width: 30px;height: 30px; margin-top: 1px;\">");
                return;
            }
        }else {
            alert("客官勿重复操作！！");
        }
    }
</script>
<script type="text/javascript">

    //点击发表按扭，发表内容
    window.submitTextarea = function(){
        //用户未登录不能发表评论
        var userId = $("#userId").val();
        if(userId == null){
            alert("前先登录！");
            return;
        }
        var content = $("#textContent").val();
        if (content == null || content == ''){
            return;
        }
        //拼接评论内容
        var commentList = $("#commentList");
        var userPhone = $("#userPhoneId").text();
        var bookId = $("#bookId").val();

        //插入一条评论
        $.ajax({
           url:'/social/addComment',
           data:{
               'userPhone':userPhone,
               'content':content,
               'bookId':bookId,
               'userId':userId
           },
            dataType: 'json',
            success:function (data) {
               var commentId = data.data;
               if (data.code == 200){
                   //添加一条评论进行展示
                   var str = '<div class="msgCon" id="comment'+data.data+'">\n' +
                       '                        <div class=\'msgBox\'>\n' +
                       '                            <div class=\'msgTxt\'>\n' +
                       '                                <div class=\'msgBox\'>\n' +
                       '                                    <div class="headUrl">\n' +
                       '                                        <img src=\'/images/tx.jpg\' width=\'50\' height=\'50\'/>\n' +
                       '                                        <div>\n' +
                       '                                            <span class="title">'+userPhone+'</span>\n' +
                       '                                            <span class="time">刚刚</span>\n' +
                       '                                        </div>\n' +
                       '                                        <a class="del">删除</a>\n' +
                       '                                    </div>\n' +
                       '                                    <div class=\'msgTxt\'>\n' +
                       '                                        '+content+'\n' +
                       '                                    </div>\n' +
                       '                                </div>\n' +
                       '                            </div>\n' +
                       '                        </div>\n' +
                       '                    </div>';
                   $("#commentList").append(str);
               }
            }
        });
    };
    //删除当前数据
    $("body").on('click', '.del', function () {
        let index = $(this).parent().parent().index();
        msgBoxList.splice(index, 1)
        window.localStorage.setItem('msgBoxList', JSON.stringify(msgBoxList)) //将数据保存到缓存
        $(this).parent().parent().remove()
    });

    //渲染html
    function innerHTMl(List) {
        List = List || []
        List.forEach(item => {
            let str =
                `<div class='msgBox'>
						<div class="headUrl">
							<img src='/images/tx.jpg' width='50' height='50'/>
							<div>
								<span class="title">木林森里没有木</span>
								<span class="time">2018-01-01</span>
							</div>
							<a class="del">删除</a>
						</div>
						<div class='msgTxt'>
							${item.msg}
						</div>
					</div>`
            $(".msgCon").prepend(str);
        })
    }
</script>

<script lang="javascript" type="text/javascript" th:src="@{/js/common.min-201706.js}"></script>
<script th:inline="javascript">
    var comments = [[${comments}]];
    console.log(comments);
    layui.use(["jquery", "layer", 'rate', "form", "element"], function () {
        var $ = layui.$;
        var layer = layui.layer;
        var rate = layui.rate;

        /*监听电影评分事件*/
        rate.render({
            elem: '#stars'
            ,value: 3.5 //初始值
            ,half: true
            ,text: true
            ,choose: function(value){
                //回调函数，存储用户点击的评分
                var userId = $("#userId").val();
                if ("undefined" == typeof userId){
                    alert("请先登录！");
                    return false;
                }
                $.ajax({
                        url: '/bookPoint/insertBookPoint',
                        data: {
                            'value':value,
                            'bookId':$("#bookId").val(),
                        },
                        dataType: 'json',
                        type: 'post',
                        success:function(data){
                            if (data.data = '200'){
                                return true;
                            }
                        }
                    }
                );
            }
        });

        /**
         * 初始图书评分展示
         */
        rate.render({
            elem: '#book-stars'
            ,value: $("#pointValue").val()
            ,half: true
            ,readonly:true
        });
        /*提交发表评论*/
    });
</script>
</body>
</html>
